<template>
  <div class="groupchat-contrainer">
      <div v-for="item in groupcards" :key="item.id" @click="enterChat(item.id)">
        <n-card bordered size="large">
            <div class="avatar-part float-left">
                <n-badge :value="item.messagenumber">
                    <n-avatar :src=item.avatar size="large"></n-avatar>
                </n-badge>
            </div>
            <div class="body-part float-left">
                <div class="friend-name">{{item.groupname}}</div>
                <div class="friend-msg">{{item.messagetype}}</div>
            </div>
            <div class="mark-part float-right">
                <small>{{item.lastmsgtime}}</small>
                
            </div>
        </n-card>
      </div>

  </div>
</template>

<script>
import {reactive} from 'vue'
import {useRouter} from 'vue-router'
import {NCard, NAvatar, NSpace, NBadge} from 'naive-ui'
export default {

    components:{
        NCard, NAvatar,NSpace,NBadge
    },
    setup(){
        const router = useRouter()
        const enterChat = (id)=>{
            router.push({name:'MainChatContent', params:{id:id}})
        }
        let groupcards = reactive([{
            id:1,
            avatar:'../assets/logo.png',
            groupname:'xiaotian',
            lastmsgtime:'昨天',
            messagetype:'图片',
            messagenumber:'19'
        },
        {
            id:2,
            avatar:'../assets/logo.png',
            groupname:'gcc',
            lastmsgtime:'刚刚',
            messagetype:'你不是说你睡了吗？',
            messagenumber:'99+'
        }
        ])
        return {
            groupcards,
            enterChat
        }
    }
}
</script>

<style scoped>
    .float-left{
        float: left;
    }
    .float-right{
        float: right;
    }
    .body-part{
        /* border: 2px solid ; */
        margin-left: 15px;
    }
    .friend-name{
        text-align: left;
        font-size: 20px;
        
    }
    .mark-part{
        margin-right: 10px;
    }
    
</style>